<!--
作者：qzy
时间：20221030
说明：此组件为教学任务的详情页的主页面，以展示课程信息、管理教学任务等功能为主
-->
<template>
  <div class="container">
    <div class="header">
      <div class="page-header">
        <el-page-header @back="goBack">
          <template #content>
            <div class="page" v-for="(item) in teamList" :key="item.id">
              <span> {{ item.schoolCourse.name }} /</span>
              <span> {{ item.className }} </span>
            </div>
          </template>
        </el-page-header>
      </div>
      <div class="head-title">
        <dl v-for="(item) in teamList" :key="item.id">
          <dd>{{ item.schoolCourse.name }}</dd>
          <dd>{{ item.className }}</dd>
        </dl>
      </div>
    </div>
    <div class="main">
      <div class="nav">
        <ul>
          <li v-for="(item, index) in tabs" :class="item.isShow ? 'active' : ''" @click="changeItem(item)" :key="index">
            <div>{{ item.name }}</div>
            <div class="line"></div>
          </li>
        </ul>
      </div>
      <div class="main-content">
        <component :is="current.comName"></component>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
// 引入课程详情组件
import classmessage
  from '@/views/page/tearchertack/mycourse/details/teachingdetails/classmessage/Index.vue';
// 引入学生管理组件
import studentmanage
  from '@/views/page/tearchertack/mycourse/details/teachingdetails/studentmanage/Index.vue';
// 引入学生管理组件
import classroom
  from '@/views/page/tearchertack/mycourse/details/teachingdetails/classroom/Index.vue';
import {
  ref, markRaw, reactive, getCurrentInstance, onMounted,
} from 'vue';
import Request from '@/api/request/request';
import { useRouter } from 'vue-router';

const router = useRouter();
const { proxy } = getCurrentInstance();
// eslint-disable-next-line radix
const teachingTaskId = parseInt(sessionStorage.getItem('teachingTaskId') as string); // 点击的教学任务id，存在sessionStorage里
const teamList = ref([]); // 助教教师集合
// 定义类型
type Com = {
  name: string
  comName: any
  isShow: boolean
}
// 导航栏
const tabs = reactive([
  {
    name: '课程详情',
    comName: markRaw(classmessage),
    isShow: true,
  },
  {
    name: '学生管理',
    comName: markRaw(studentmanage),
    isShow: false,
  },
  {
    name: '课堂',
    comName: markRaw(classroom),
    isShow: false,
  },
  // {
  //   name: '课程资源',
  //   // comName: markRaw(resources),
  //   isShow: false,
  // },
]);
// 默认选中
const current = ref({
  comName: tabs[0].comName,
});

// 导航栏切换点击事件
const changeItem = (item: Com) => {
  current.value.comName = item.comName;
  tabs.forEach((value: any) => {
    // eslint-disable-next-line no-param-reassign
    value.isShow = item.name === value.name;
  });
};

// 获取该教学任务详情
const getClassMegList = async () => {
  const resData: any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASK_MANAGE, null, {
    params: {
      id: teachingTaskId,
    },
  }).get();
  if (resData.code === 200) {
    teamList.value = resData.data.data;
  }
};

onMounted(async () => {
  await getClassMegList();
});

// 返回事件，由课程详情页跳回课程管理页面
const goBack = () => {
  router.push({
    name: 'details',
  });
};

</script>

<style src="./index.scss" lang="scss" scoped>

</style>
